<template>
    <div class="template-page">
        <h2>AI 绘画模板</h2>
        <template-list
            :templates="templates"
            :loading="loading"
        />
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import TemplateList from '@/components/template/TemplateList.vue';
import { workflowApi } from '@/api/workflow';
import type { WorkflowTemplate } from '@/types';

const templates = ref<WorkflowTemplate[]>([]);
const loading = ref(false);

const loadTemplates = async () => {
    try {
        loading.value = true;
        const { data } = await workflowApi.getAllWorkflows();
        templates.value = data.data;
    } catch (error) {
        ElMessage.error('加载模板失败');
        console.error('Load templates error:', error);
    } finally {
        loading.value = false;
    }
};

onMounted(() => {
    loadTemplates();
});
</script>

<style lang="scss" scoped>
.template-page {
    padding: 20px;

    h2 {
        margin-bottom: 20px;
    }
}
</style> 